<template>
  <div>
    <!--
    买入批次<el-date-picker
          style="width: 120px; margin-right:30px; margin-left:10px"
            v-model="searchData.buy_num.value"
            value-format="YYYY-MM"
            type="month"
            placeholder="买入批次"
            :default-value="new Date(2024, 1, 1)"
          />
      </div>

        母牛品种<el-select v-model="searchData.sort.value" placeholder="母牛品种" style="width: 120px; margin-right:30px; margin-left:10px">
          <el-option label="西门塔尔牛" value="西门塔尔牛"/>
          <el-option label="鲁西黄牛" value="鲁西黄牛"/>
          <el-option label="夏洛莱牛" value="夏洛莱牛"/>
        </el-select>
     -->
    <div class="search-line">
      项目id
      <el-input v-model="searchData.id.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      项目名
      <el-input v-model="searchData.projName.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      项目负责人
      <el-input v-model="searchData.projUserId.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      建设内容
      <el-input v-model="searchData.projMat.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      计划总投资
      <el-input v-model="searchData.totalPlanPrice.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      实际总投资
      <el-input v-model="searchData.totalPrice.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      计划开工时间
      <el-input v-model="searchData.planStartTime.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      计划结束时间
      <el-input v-model="searchData.planEndTime.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      实际开工时间
      <el-input v-model="searchData.finalStartTime.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      实际结束时间
      <el-input v-model="searchData.finalEndTime.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      业主单位
      <el-input v-model="searchData.ownerUnit.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      实施单位
      <el-input v-model="searchData.doUnit.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      备注
      <el-input v-model="searchData.remark.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      项目完成状态 0未完成 1已完成
      <el-input v-model="searchData.projStatus.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      创建时间
      <el-input v-model="searchData.createTime.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      更新时间
      <el-input v-model="searchData.updateTime.value" style="width: 80px; margin-right:30px; margin-left:10px"/>
      <el-button type="primary" @click="loadData()">查询</el-button>
      <el-button type="warning" @click="clearnSearch()">重置</el-button>
      <el-button type="success" @click="addDialog = true">添加</el-button>
    </div>

    <div class="border w-full">
      <el-table :data="tableData.records">
        <!---------------------表单数据------------------------------->
        <el-table-column prop="id" label="项目id" width="100"/>
        <el-table-column prop="projName" label="项目名" width="100"/>
        <el-table-column prop="projUserId" label="项目负责人" width="100"/>
        <el-table-column prop="projMat" label="建设内容" width="100"/>
        <el-table-column prop="totalPlanPrice" label="计划总投资" width="100"/>
        <el-table-column prop="totalPrice" label="实际总投资" width="100"/>
        <el-table-column prop="planStartTime" label="计划开工时间" width="100"/>
        <el-table-column prop="planEndTime" label="计划结束时间" width="100"/>
        <el-table-column prop="finalStartTime" label="实际开工时间" width="100"/>
        <el-table-column prop="finalEndTime" label="实际结束时间" width="100"/>
        <el-table-column prop="ownerUnit" label="业主单位" width="100"/>
        <el-table-column prop="doUnit" label="实施单位" width="100"/>
        <el-table-column prop="remark" label="备注" width="100"/>
        <el-table-column prop="projStatus" label="项目完成状态 0未完成 1已完成" width="100"/>
        <el-table-column prop="createTime" label="创建时间" width="100"/>
        <el-table-column prop="updateTime" label="更新时间" width="100"/>
        <!---------------------表单数据------------------------------->
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="small" @click="openDetail(scope.row.id)">详情</el-button>
            <el-button size="small" @click="openEdit(scope.row.id)">修改</el-button>
            <el-button size="small" @click="deleted(scope.row.id)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
        style="margin-bottom: 20px"
        background
        layout="prev, pager, next"
        :page-count="tableData.pages"
        v-model:current-page="tableData.page"
        @update:current-page="loadData"
    />
    <!--------------------------------组件------------------>

    <!--  图片的 新增、修改-
    <ImgsUpload
       :fileList=imgList
       @changeImgList="changeImgList"
       arrLength="6"
       />
       -->

    <!-- 图片查看
    <ImgsShow
    :fileList=imgList
    />

    -->

    <!----select 框
       <el-select v-model="form.sort" placeholder="选择" style="width: 240px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
      />
    </el-select>

     <el-select v-model="form.feedType" placeholder="饲养类型" style="width: 240px">
      <el-option label="内养" value="内养"/>
      <el-option label="寄养" value="寄养"/>
    </el-select>

    ----  -->

    <!-- 时间选择器
<div class="block">

  <el-date-picker
    v-model="form.buyTime"
    value-format="YYYY-MM-DD"
    type="date" // month // year
    placeholder="Pick a date"
    :default-value="new Date(2014, 1, 1)"
  />
</div>
-->

    <!------------------详情弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="detailDialog"
        title="详情"
        width="30%"
        :before-close="resetForm"
    >
      <div>
        <div>
          项目名 : {{ form.projName }}
        </div>
        <div>
          项目负责人 : {{ form.projUserId }}
        </div>
        <div>
          建设内容 : {{ form.projMat }}
        </div>
        <div>
          计划总投资 : {{ form.totalPlanPrice }}
        </div>
        <div>
          实际总投资 : {{ form.totalPrice }}
        </div>
        <div>
          计划开工时间 : {{ form.planStartTime }}
        </div>
        <div>
          计划结束时间 : {{ form.planEndTime }}
        </div>
        <div>
          实际开工时间 : {{ form.finalStartTime }}
        </div>
        <div>
          实际结束时间 : {{ form.finalEndTime }}
        </div>
        <div>
          业主单位 : {{ form.ownerUnit }}
        </div>
        <div>
          实施单位 : {{ form.doUnit }}
        </div>
        <div>
          备注 : {{ form.remark }}
        </div>
        <div>
          项目完成状态 0未完成 1已完成 : {{ form.projStatus }}
        </div>
        <div>
          创建时间 : {{ form.createTime }}
        </div>
        <div>
          更新时间 : {{ form.updateTime }}
        </div>
      </div>
      <el-button @click="resetForm">关闭</el-button>
    </el-dialog>

    <!------------------新增弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="addDialog"
        title="新增"
        width="30%"
        :before-close="resetForm"
    >
      <!--数据开始---->
      <el-form :model="form" label-width="120px">
        <el-form-item label="项目名">
          <el-input v-model="form.projName"/>
        </el-form-item>
        <el-form-item label="项目负责人">
          <el-input v-model="form.projUserId"/>
        </el-form-item>
        <el-form-item label="建设内容">
          <el-input v-model="form.projMat"/>
        </el-form-item>
        <el-form-item label="计划总投资">
          <el-input v-model="form.totalPlanPrice"/>
        </el-form-item>
        <el-form-item label="实际总投资">
          <el-input v-model="form.totalPrice"/>
        </el-form-item>
        <el-form-item label="计划开工时间">
          <el-input v-model="form.planStartTime"/>
        </el-form-item>
        <el-form-item label="计划结束时间">
          <el-input v-model="form.planEndTime"/>
        </el-form-item>
        <el-form-item label="实际开工时间">
          <el-input v-model="form.finalStartTime"/>
        </el-form-item>
        <el-form-item label="实际结束时间">
          <el-input v-model="form.finalEndTime"/>
        </el-form-item>
        <el-form-item label="业主单位">
          <el-input v-model="form.ownerUnit"/>
        </el-form-item>
        <el-form-item label="实施单位">
          <el-input v-model="form.doUnit"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark"/>
        </el-form-item>
        <el-form-item label="项目完成状态 0未完成 1已完成">
          <el-input v-model="form.projStatus"/>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime"/>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input v-model="form.updateTime"/>
        </el-form-item>
        <!--数据截止---->
        <el-form-item>
          <el-button type="primary" @click="add">添加</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!------------------编辑弹窗--------------------------------->
    <el-dialog
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        v-model="editDialog"
        title="编辑"
        width="30%"
        :before-close="resetForm"
    >
      <!--数据开始---->
      <el-form :model="form" label-width="120px">
        <el-form-item label="项目名">
          <el-input v-model="form.projName"/>
        </el-form-item>
        <el-form-item label="项目负责人">
          <el-input v-model="form.projUserId"/>
        </el-form-item>
        <el-form-item label="建设内容">
          <el-input v-model="form.projMat"/>
        </el-form-item>
        <el-form-item label="计划总投资">
          <el-input v-model="form.totalPlanPrice"/>
        </el-form-item>
        <el-form-item label="实际总投资">
          <el-input v-model="form.totalPrice"/>
        </el-form-item>
        <el-form-item label="计划开工时间">
          <el-input v-model="form.planStartTime"/>
        </el-form-item>
        <el-form-item label="计划结束时间">
          <el-input v-model="form.planEndTime"/>
        </el-form-item>
        <el-form-item label="实际开工时间">
          <el-input v-model="form.finalStartTime"/>
        </el-form-item>
        <el-form-item label="实际结束时间">
          <el-input v-model="form.finalEndTime"/>
        </el-form-item>
        <el-form-item label="业主单位">
          <el-input v-model="form.ownerUnit"/>
        </el-form-item>
        <el-form-item label="实施单位">
          <el-input v-model="form.doUnit"/>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.remark"/>
        </el-form-item>
        <el-form-item label="项目完成状态 0未完成 1已完成">
          <el-input v-model="form.projStatus"/>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime"/>
        </el-form-item>
        <el-form-item label="更新时间">
          <el-input v-model="form.updateTime"/>
        </el-form-item>
        <!--数据截止---->
        <el-form-item>
          <el-button type="primary" @click="edit">修改</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


  </div>
</template>

<script setup>
import {ElMessage, ElMessageBox} from "element-plus";
import {onMounted, reactive, ref} from "vue";
import ImgsUpload from "@/components/img/imgsUpload/index.vue"
import ImgsShow from "@/components/img/imgShow/index.vue"
import {
  getProjectPage,
  updateProject,
  deletedProject,
  addProject,
  getProjectById
} from "@/api/project";
import {useUserStore} from "@/stores/userStores";

const tableData = reactive({
  records: [],
  orderBy: '',
  pages: 0,
  page: 1,
  size: 10,
  query: {}
});
const form = ref({
  id: '', //项目id
  projName: '', //项目名
  projUserId: '', //项目负责人
  projMat: '', //建设内容
  totalPlanPrice: '', //计划总投资
  totalPrice: '', //实际总投资
  planStartTime: '', //计划开工时间
  planEndTime: '', //计划结束时间
  finalStartTime: '', //实际开工时间
  finalEndTime: '', //实际结束时间
  ownerUnit: '', //业主单位
  doUnit: '', //实施单位
  remark: '', //备注
  projStatus: '', //项目完成状态 0未完成 1已完成
  createTime: '', //创建时间
  updateTime: '', //更新时间
});
//------------选择框------------------------
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
    disabled: true,
  },

];

//------------基本常量------------------------
const userStore = useUserStore();
const token = userStore.token;
const detailDialog = ref(false);
const editDialog = ref(false);
const addDialog = ref(false);

// --------图片相关----------
const imgList = ref([])
const changeImgList = (array) => {
  imgList.value = array;
  form.value.pictures = JSON.stringify(array);
}

const dealImgJson = () => {
  // 图片处理
  console.log("拿到的图片值", form.value.pictures)
  if ('' != form.value.pictures && null != form.value.pictures) {
    imgList.value = JSON.parse(form.value.pictures.replace(/[\\]/g, ''));
  }
}

// ------------------- 搜索操作 ------------------------

const searchData = ref({
  //项目id
  id: {
    key: 'id',
    sqlKeyword: 'EQ',
    value: ''
  },
  //项目名
  projName: {
    key: 'projName',
    sqlKeyword: 'EQ',
    value: ''
  },
  //项目负责人
  projUserId: {
    key: 'projUserId',
    sqlKeyword: 'EQ',
    value: ''
  },
  //建设内容
  projMat: {
    key: 'projMat',
    sqlKeyword: 'EQ',
    value: ''
  },
  //计划总投资
  totalPlanPrice: {
    key: 'totalPlanPrice',
    sqlKeyword: 'EQ',
    value: ''
  },
  //实际总投资
  totalPrice: {
    key: 'totalPrice',
    sqlKeyword: 'EQ',
    value: ''
  },
  //计划开工时间
  planStartTime: {
    key: 'planStartTime',
    sqlKeyword: 'EQ',
    value: ''
  },
  //计划结束时间
  planEndTime: {
    key: 'planEndTime',
    sqlKeyword: 'EQ',
    value: ''
  },
  //实际开工时间
  finalStartTime: {
    key: 'finalStartTime',
    sqlKeyword: 'EQ',
    value: ''
  },
  //实际结束时间
  finalEndTime: {
    key: 'finalEndTime',
    sqlKeyword: 'EQ',
    value: ''
  },
  //业主单位
  ownerUnit: {
    key: 'ownerUnit',
    sqlKeyword: 'EQ',
    value: ''
  },
  //实施单位
  doUnit: {
    key: 'doUnit',
    sqlKeyword: 'EQ',
    value: ''
  },
  //备注
  remark: {
    key: 'remark',
    sqlKeyword: 'EQ',
    value: ''
  },
  //项目完成状态 0未完成 1已完成
  projStatus: {
    key: 'projStatus',
    sqlKeyword: 'EQ',
    value: ''
  },
  //创建时间
  createTime: {
    key: 'createTime',
    sqlKeyword: 'EQ',
    value: ''
  },
  //更新时间
  updateTime: {
    key: 'updateTime',
    sqlKeyword: 'EQ',
    value: ''
  },

});

function clearnSearch() {
  searchData.value.id.value = '';
  searchData.value.projName.value = '';
  searchData.value.projUserId.value = '';
  searchData.value.projMat.value = '';
  searchData.value.totalPlanPrice.value = '';
  searchData.value.totalPrice.value = '';
  searchData.value.planStartTime.value = '';
  searchData.value.planEndTime.value = '';
  searchData.value.finalStartTime.value = '';
  searchData.value.finalEndTime.value = '';
  searchData.value.ownerUnit.value = '';
  searchData.value.doUnit.value = '';
  searchData.value.remark.value = '';
  searchData.value.projStatus.value = '';
  searchData.value.createTime.value = '';
  searchData.value.updateTime.value = '';
  loadData();

}


/**
 * 查看详情
 * */
const openDetail = async (id) => {
  const res = await getProjectById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  detailDialog.value = true;
}

/**
 * 打开编辑按钮
 */
const openEdit = async (id) => {
  const res = await getProjectById(id);
  form.value = res.data;
  // 图片处理
  dealImgJson();
  editDialog.value = true;
};

/**
 *修改
 */
const edit = async () => {
  const res = await updateProject(form.value);
  ElMessage.success("修改成功");
  editDialog.value = false;
  loadData();
  resetForm();
};

/**
 *添加
 */
const add = async () => {
  const res = await addProject(form.value);
  ElMessage.success("添加成功");
  addDialog.value = false;
  loadData();
  resetForm();
};

/**
 * 删除数据
 */
const deleted = async (id) => {
  ElMessageBox.confirm("是否确认删除？", "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const res = await deletedProject({id});
    ElMessage.success("success");
    loadData();
  });
};

/**
 * 重置表单
 */
const resetForm = () => {
  if (addDialog.value) {
    addDialog.value = false;
  }
  if (editDialog.value) {
    editDialog.value = false;
  }
  if (detailDialog.value) {
    detailDialog.value = false;
  }
  form.value = {};
  // 图片处理
  imgList.value = [];
};

const loadData = async () => {
  tableData.query = searchData.value;
  const res = await getProjectPage(tableData);
  tableData.records = res.data.list;
  tableData.page = res.data.page;
  tableData.pages = res.data.pages;
};
onMounted(() => {
  // 初始加载分页数据
  loadData(tableData);
});
</script>

<style scoped>

.search-line {
  display: flex;
  margin-bottom: 10px;
  text-align: center;
  line-height: 35px;
}

</style>

